<template>
  <div class="interrogation-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-button @click="handleBack" type="primary" plain>
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <h2 class="page-title">
        订单详情 -
        {{ orderDetail.statusName || getOrderStatusText(orderDetail.status) }}
      </h2>
    </div>

    <!-- 患者信息 -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>患者信息</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>患者姓名：</label>
            <span>{{ orderDetail.patientName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>性别：</label>
            <span>{{ orderDetail.sex }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>年龄：</label>
            <span>{{ orderDetail.age }}岁</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>手机号：</label>
            <span>{{ orderDetail.phone }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>就诊情况：</label>
            <span>{{
              orderDetail.consultationStatus || "未去医院就诊过"
            }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>预约时间：</label>
            <span>{{ orderDetail.appointmentTime || "未预约" }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-item">
            <label>病情描述：</label>
            <span>{{ orderDetail.conditionDescription }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>提交时间：</label>
            <span>{{ formatDateTime(orderDetail.submissionTime) }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 订单信息 -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>订单信息</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>订单编号：</label>
            <span>{{ orderDetail.orderNo }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>订单类型：</label>
            <el-tag :type="getConsultationMethodType(orderDetail.orderType)">
              {{ orderDetail.orderTypeName }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>状态：</label>
            <el-tag :type="getOrderStatusType(orderDetail.status)">
              {{ getOrderStatusText(orderDetail.status) }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>应付金额：</label>
            <span class="amount"
              >¥{{ orderDetail.amountPayable?.toFixed(2) || "0.00" }}</span
            >
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>支付方式：</label>
            <span>{{ orderDetail.paymentMethodName || "未支付" }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>支付时间：</label>
            <span>{{ formatDateTime(orderDetail.paymentTime) }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>创建时间：</label>
            <span>{{ formatDateTime(orderDetail.createTime) }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 接诊信息 - 仅已完成订单显示 -->
    <el-card
      v-if="orderDetail.status === OrderStatus.COMPLETED"
      class="info-card"
      shadow="never"
    >
      <template #header>
        <div class="card-header">
          <span>接诊信息</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>接诊时间：</label>
            <span>{{ formatDateTime(orderDetail.consultationTime) }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>通话时长：</label>
            <span>{{ orderDetail.callDuration || "00:00" }}分钟</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>患者评分：</label>
            <el-rate
              v-model="orderDetail.patientRating"
              disabled
              show-score
              text-color="#ff9900"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-item">
            <label>患者评价：</label>
            <span>{{ orderDetail.patientReview || "暂无评价" }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import { OrderAPI } from "../api/order";

// 路由相关
const route = useRoute();
const router = useRouter();
const orderId = route.params.id as string;

// 订单详情数据
const orderDetail = ref({
  id: 0,
  orderNo: "",
  orderType: 0,
  orderTypeName: "",
  status: 0,
  statusName: "",
  amountPayable: 0,
  createTime: "",
  paymentMethod: "",
  paymentMethodName: "",
  paymentTime: "",
  appointmentTime: "",
  submissionTime: "",
  patientId: 0,
  patientName: "",
  sex: "",
  genderName: "",
  age: 0,
  phone: "",
  address: "",
  conditionDescription: "",
  consultationStatus: "",
  interrogationId: 0,
  consultationTime: "",
  callDuration: 0,
  patientRating: 0,
  patientReview: "",
  withdrawnCause: "",
});

// 问诊方式枚举
const ConsultationMethod = {
  VIDEO: 0, // 视频问诊
  PHONE: 5, // 电话问诊
  TEXT: 10, // 图文问诊
};

// 订单状态枚举
const OrderStatus = {
  PENDING: 0, // 待支付
  IN_PROGRESS: 5, // 进行中
  COMPLETED: 10, // 已完成
  CANCELLED: 15, // 已取消
  REFUNDED: 20, // 已退诊
};

// 获取问诊方式类型
const getConsultationMethodType = (method: number) => {
  const methodMap: Record<number, string> = {
    [ConsultationMethod.VIDEO]: "primary",
    [ConsultationMethod.PHONE]: "success",
    [ConsultationMethod.TEXT]: "warning",
  };
  return methodMap[method] || "info";
};

// 获取订单状态类型
const getOrderStatusType = (status: number) => {
  const statusMap: Record<number, string> = {
    [OrderStatus.PENDING]: "warning",
    [OrderStatus.IN_PROGRESS]: "primary",
    [OrderStatus.COMPLETED]: "success",
    [OrderStatus.CANCELLED]: "info",
    [OrderStatus.REFUNDED]: "danger",
  };
  return statusMap[status] || "info";
};

// 获取订单状态文本
const getOrderStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    [OrderStatus.PENDING]: "待支付",
    [OrderStatus.IN_PROGRESS]: "进行中",
    [OrderStatus.COMPLETED]: "已完成",
    [OrderStatus.CANCELLED]: "已取消",
    [OrderStatus.REFUNDED]: "已退诊",
  };
  return statusMap[status] || "未知";
};

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return "";
  return new Date(dateTime).toLocaleString("zh-CN");
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 加载订单详情
const loadOrderDetail = async () => {
  try {
    console.log("加载问诊订单详情，ID:", orderId);
    const response = await OrderAPI.getInterrogationOrderDetail(
      Number(orderId)
    );

    if (response && response.data) {
      orderDetail.value = response.data;
      console.log("问诊订单详情加载成功:", response.data);
    } else {
      console.error("API响应格式错误:", response);
      ElMessage.error("数据加载失败");
    }
  } catch (error) {
    console.error("加载问诊订单详情失败:", error);
    ElMessage.error("数据加载失败，请检查网络连接");
  }
};

// 页面加载时获取数据
onMounted(() => {
  if (orderId) {
    loadOrderDetail();
  } else {
    ElMessage.error("订单ID不能为空");
    router.back();
  }
});

// 监听订单详情变化，更新页面标题
watch(
  orderDetail,
  (newDetail) => {
    if (newDetail.status !== undefined) {
      const statusText =
        newDetail.statusName || getOrderStatusText(newDetail.status);
      document.title = `订单详情 - ${statusText}`;
    }
  },
  { deep: true }
);
</script>

<style scoped>
.interrogation-detail {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  font-weight: 600;
  color: #333;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.info-item label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
  margin-right: 10px;
}

.info-item span {
  color: #333;
  flex: 1;
}

.amount {
  font-weight: 600;
  color: #e6a23c;
  font-size: 16px;
}

.coupon {
  font-weight: 600;
  color: #67c23a;
  font-size: 16px;
}

.actual-payment {
  font-weight: 600;
  color: #f56c6c;
  font-size: 16px;
}

.el-row {
  margin-bottom: 10px;
}

.el-col {
  margin-bottom: 10px;
}

.el-rate {
  display: inline-block;
}
</style>
